import {Component} from "react";
import React from "react";
import Untils from "../untils/untils";
import {is, fromJS} from 'immutable'

class SwiperBar extends Component {
    constructor() {
        super();
        this.state = {
            startX: 0, //触摸位置
            moveX: 0, //滑动时的位置
            disX: 0, //移动距离
            txtStyle: {},
            delWidth: 40,
            top: '',
            zIndex: 'z-index:-1',
        };
        this.touchStart = this.touchStart.bind(this);
        this.touchMove = this.touchMove.bind(this);
        this.touchEnd = this.touchEnd.bind(this);
    }

    render() {
        return (
            <div className="swipe" style={this.state.txtStyle}
                 onTouchStart={this.props.ifSlider ? this.touchStart : ''}
                 onTouchMove={this.props.ifSlider ? this.touchMove : ''}
                 onTouchEnd={this.props.ifSlider ? this.touchEnd : ''}
            >
                <p>{this.props.text}</p>
                <a onClick={this.remove.bind(this)}>删除</a>
            </div>
        )
    }

    touchStart(ev) {
        ev = ev || window.event;
        //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
        if (ev.touches.length == 1) {
            // 记录开始位置
            // this.state.startX = ev.touches[0].clientX;
            this.setState({
                startX: ev.touches[0].clientX,
            });
        }
    }

    touchMove(ev) {
        ev = ev || window.event;
        if (ev.touches.length == 1) {
            // 滑动过程中的实时位置
            // this.state.moveX = ev.touches[0].clientX;
            // 滑动过程中实时计算滑动距离
            // this.state.disX =  this.state.startX -  this.state.moveX;
            this.setState({
                moveX: ev.touches[0].clientX,
                disX: this.state.startX - this.state.moveX
            });
            // console.log('disX==>',this.disX)
            // 如果是向右滑动或者只是点击，不改变滑动位置
            if (this.state.disX < 0 || this.state.disX == 0) {
                // console.log('没有移动');
                this.setState({
                    txtStyle: {transform: 'translateX(0rem)'}
                })
            } else if (this.state.disX > 0) {
                // 如果是向左滑动，则实时给这个根元素一个向左的偏移-left，当偏移量到达固定值delWidth时，固定元素的偏移量为 delWidth
                this.setState({
                    txtStyle: {transform: 'translateX(-' + this.state.disX + 'px)'}
                });
                if (this.state.disX >= this.state.delWidth) {
                    this.setState({
                        txtStyle: {transform: 'translateX(-' + this.state.delWidth + 'px)'},
                        zIndex: "z-index:" + 10
                    })
                }
            }
        }

    }

    touchEnd(ev) {
        ev = ev || window.event;
        if (ev.changedTouches.length == 1) {
            // this.state.startX = 0;
            // this.state.zIndex = "z-index:" + -1;
            // console.log(ev.changedTouches[0].clientX);
            // 手指移动结束后的水平位置
            let endX = ev.changedTouches[0].clientX;
            // 触摸开始与结束,手指移动的距离
            // this.state.disX = this.state.startX - endX;
            this.setState({
                startX: 0,
                zIndex: "z-index:" + -1,
                disX: this.state.startX - endX
            });
            //如果距离小于删除按钮的1/2，不显示删除按钮
            // if(this.state.disX<this.state.delWidth  ){
            //     this.setState({
            //         txtStyle:{transform:'translateX(0rem)'}
            //     })
            // }
        }

    }

    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState));

    }

    remove() {
        this.props.remove(this.props.index);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.txtStyle) {
            this.setState({
                txtStyle: this.props.txtStyle
            })
        }

    }

}

export default SwiperBar